<template>
  <div class="model-page">
    <div class="model-wrap">
      <el-card
        class="model-card"
        v-for="(modelItem, index) in modelKeyList"
        :key="index"
      >
        <div>
          {{ modelItem.key }}
          {{ modelItem.key == "form" ? "(默认不可删除)" : "" }}
        </div>
        <div class="handles-wrap">
          <div class="editor" @click="editor(modelItem.key)">编辑</div>
          <div class="remove" v-if="modelItem.key != 'form'">
            <el-popconfirm
              title="你确认要删除这个?"
              @confirm="remove(modelItem.key)"
            >
              <template #reference> 删除 </template>
            </el-popconfirm>
          </div>
        </div>
      </el-card>
      <el-card class="model-card add-model" @click="addModel"> 添加 </el-card>
    </div>

    <el-dialog
      v-model="dialogModelVisible"
      width="70%"
      append-to-body
      destroy-on-close
      :close-on-click-modal="false"
      :title="currentModel.key"
    >
      <el-form
        ref="modelFormRef"
        :model="currentModel"
        label-width="120px"
        class="demo-ruleForm"
        label-position="top"
        status-icon
      >
        <el-form-item
          label=""
          prop="key"
          :rules="{
            required: true,
            message: '模型字段必填',
            trigger: 'blur',
          }"
        >
          <el-input
            :disabled="currentModel.key == 'form'"
            v-model.trim="currentModel.key"
          />
        </el-form-item>
      </el-form>

      <low-code-editor
        :mode="'json'"
        :readonly="false"
        v-model="editorCode"
      ></low-code-editor>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogModelVisible = false">取消</el-button>
          <el-button type="primary" @click="saveModel">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, nextTick, inject } from "vue";
import { ElMessage } from "element-plus";
import { LowCodeImp } from "@/components/low-code/core";

export default defineComponent({
  components: {},
  setup() {
    const dialogModelVisible = ref(false);
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;

    const editorCode = ref("{}");

    const modelFormRef = ref();

    const addModel = () => {
      currentModelOldKey.value = ""; //原始key 缓存
      currentModel.value.key = "";
      dialogModelVisible.value = true;
      editorCode.value = "{}";
    };

    const modelKeyList = computed(() => {
      return lowCode.modelController.modelKeyList;
    });

    const saveModel = () => {
      modelFormRef.value.validate((valid: boolean) => {
        if (valid) {
          try {
            let model = JSON.parse(editorCode.value);
            delete lowCode.model[currentModelOldKey.value];
            lowCode.modelController.saveModel(currentModel.value.key, model);
            dialogModelVisible.value = false;
            ElMessage.success("保存成功");
          } catch (error) {
            ElMessage.error("JSON格式化错误");
          }
        } else {
          console.log("error submit!");
          return false;
        }
      });
    };

    const currentModelOldKey = ref("");
    const currentModel = ref({ key: "", value: "" });
    const editor = (key: string) => {
      // currentModelOldKey.value = key; //原始key 缓存
      currentModel.value.key = key;
      let code = lowCode.modelController.selectModel(key);
      currentModel.value.value = code.value;
      dialogModelVisible.value = true;
      editorCode.value = code.value;
    };
    const remove = (key: string) => {
      lowCode.modelController.removeModel(key);
      ElMessage.success("删除成功");
    };

    return {
      dialogModelVisible,
      addModel,
      currentModel,
      modelKeyList,
      editor,
      remove,

      modelFormRef,
      saveModel,
      editorCode,
    };
  },
});
</script>

<style scoped>
#container {
  min-height: 200px;
}
.el-dialog ::v-deep .el-dialog__body {
  padding: 10px !important;
}

.model-wrap {
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.model-wrap .el-card {
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}
.model-card {
  width: 250px;
  height: 100px;
}

.model-card .handles-wrap {
  display: flex;
  margin-top: 20px;
  justify-content: flex-end;
  font-size: 13px;
}
.model-card .handles-wrap > .editor {
  margin-right: 10px;
}
.model-card .handles-wrap > .editor {
  color: #409eff;
}
.model-card .handles-wrap > .remove {
  color: #f56c6c;
}

.add-model {
  color: #409eff;
  font-size: 13px;
}
</style>
